<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LMap from '@l-ui/components/map';

import { isPoint } from '@l-ui/components/map/options/geometry';
import type { Geometry, Point } from 'ol/geom';
const mapRef = ref<InstanceType<typeof LMap> | null>(null);

const points = [
  { lng: 116.41, lat: 39.9, pointId: 21, pointName: '点1', value: 0.5 },
  {
    lng: 116.57,
    lat: 39.92,
    pointId: 22,
    pointName: '点2',
    value: 1,
  },
];
onMounted(() => {
  mapRef.value!.renderPoints(points, {
    styleOpts: {
      type: 'circle',
    },
  });
  mapRef.value!.renderPoints(points, {
    styleOpts: {
      type: 'icon',
      iconSrc: () => 'mark',
    },
  });

  mapRef.value!.renderLine(
    [
      {
        lng: 116.57,
        lat: 39.92,
        pointId: 22,
        pointName: '点2',
        value: 1,
      },
      {
        lng: 115.41,
        lat: 39.79,
        pointId: 23,
        pointName: '点3',
      },
      {
        lng: 116.74,
        lat: 39.7,
        pointId: 24,
        pointName: '点4',
      },
      { lng: 117.11, lat: 40.09, pointId: 25, pointName: '点5' },
    ],
    {
      startEndPoint: true,
      lineArrow: true,
      passPoint: true,
    },
  );

  // mapRef.value.renderLine(points)
  mapRef.value!.renderHeatmap(points);
  mapRef.value!.renderArea([], {
    adcode: '100000',
    url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
  });
});

const popoverData = ref<Record<string, any>>({});
function singleclick(data: object, elementInfo: any) {
  const popover = mapRef.value!.getPopover();
  if (data) {
    const geometry = elementInfo.geometry as Geometry;

    let coordinate: number[] = [];
    if (isPoint(geometry)) {
      const point = geometry as Point;
      coordinate = point.getCoordinates();
      popover.setPosition(coordinate);
      popoverData.value = data;
      return;
    }
  }

  popover.setPosition(undefined);
  popoverData.value = {};
}
</script>

<template>
  <LMap
    ref="mapRef"
    :zoom="4"
    @singleclick="singleclick"
    style="width: 100vw; height: 100vh"
  >
    <template #popover>
      <div>点名称 : {{ popoverData.pointName }}</div>
      <div>点ID : {{ popoverData.pointId }}</div>
      <div>经度 : {{ popoverData.lng }}</div>
      <div>纬度 : {{ popoverData.lat }}</div>
    </template>
  </LMap>
</template>
